---
type: tutorial
title: 정보 페이지 스타일 지정
description: |-
  튜토리얼: 첫 번째 Astro 블로그 구축 - 페이지에 범위 지정 스타일을 위한 Astro 스타일 태그 추가
i18nReady: true
---

import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

이제 여러분에 대한 콘텐츠가 포함된 정보 페이지가 있으므로 스타일을 지정할 차례입니다!

<PreCheck>
  - 단일 페이지의 스타일 항목
  - CSS 변수 사용
</PreCheck>

## 개별 페이지 스타일 지정

Astro의 자체 `<style></style>` 태그를 사용하여 페이지 항목의 스타일을 지정할 수 있습니다. 이러한 태그에 **속성** 및 **지시어**를 추가하면 스타일을 더욱 다양하게 지정할 수 있습니다.

<Steps>
1. 다음 코드를 복사하여 `src/pages/about.astro`에 붙여넣습니다.

    ```astro title="src/pages/about.astro" ins={6-11}
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>{pageTitle}</title>
        <style>
          h1 {
            color: purple;
            font-size: 4rem;
          }
        </style>
      </head> 
    ```

    브라우저 미리보기에서 세 페이지를 모두 확인하세요.
    
    - 다음 페이지 제목은 어떤 색상인가요?

        - 홈 페이지? <Spoiler>검은색</Spoiler>
        - 정보 페이지? <Spoiler>보라색</Spoiler>
        - 블로그 페이지? <Spoiler>검은색</Spoiler>

    - 제목 텍스트가 가장 큰 페이지는 무엇입니까? <Spoiler>정보 페이지</Spoiler>

    :::tip
    색상을 시각적으로 확인할 수 없는 경우 브라우저의 개발 도구를 사용하여 `<h1>` 제목 요소를 검사하고 적용된 텍스트 색상을 확인할 수 있습니다.
    :::

2. 정보 페이지에 생성된 `<li>` 요소에 클래스 이름 `skill`을 추가하면 스타일을 지정할 수 있습니다. 이제 코드는 다음과 같습니다.

    ```astro title="src/pages/about.astro" 'class="skill"'
    <p>My skills are:</p>
    <ul>
      {skills.map((skill) => <li class="skill">{skill}</li>)}
    </ul>
    ```

3. 기존 스타일 태그에 다음 코드를 추가합니다.

    ```astro title="src/pages/about.astro" ins={6-9}
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        font-weight: bold;
      }
    </style>
    ```

  4. 브라우저에서 정보 페이지를 다시 방문하여 직접 검사 또는 개발 도구를 통해 기술 목록의 각 항목이 이제 녹색이고 굵게 표시되는지 확인하세요.
</Steps>

## 첫 번째 CSS 변수 사용

Astro `<style>` 태그는 `define:vars={ {...} }` 지시어를 사용하여 프런트매터 스크립트의 모든 변수를 참조할 수도 있습니다. **코드 펜스 내에서 변수를 정의**한 다음 **스타일 태그에서 CSS 변수로 사용할 수 있습니다**.

<Steps>
1. 다음과 같이 `src/pages/about.astro`의 프런트매터 스크립트에 `skillColor` 변수를 추가하여 정의합니다.

    ```astro title="src/pages/about.astro" ins={17}
    ---
    const pageTitle = "About Me";

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Technical Writer",
      hobbies: ["photography", "birdwatching", "baseball"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];

    const happy = true;
    const finished = false;
    const goal = 3;
  
    const skillColor = "navy";
    ---
    ```

2. 아래의 기존 `<style>` 태그를 업데이트하여 먼저 정의한 다음 이중 중괄호 안에 이 `skillColor` 변수를 사용하세요.

    ```astro title="src/pages/about.astro" "define:vars={{skillColor}}" "var(--skillColor)" del={7} ins={8}
    <style define:vars={{skillColor}}> 
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        color: var(--skillColor);
        font-weight: bold;
      }
    </style>
    ```

3. 브라우저 미리보기에서 정보 페이지를 확인하세요. 이제 `define:vars` 지시어에 전달된 `skillColor` 변수에 따라 스킬이 네이비 블루로 표시되는 것을 볼 수 있습니다.
</Steps>

<Box icon="puzzle-piece">

## 직접 시도해 보기 - CSS 변수 정의

<Steps> 
 1. 정보 페이지의 `<style>` 태그를 업데이트하여 아래와 일치하도록 하세요.

    ```astro title="src/pages/about.astro"
    <style define:vars={{skillColor, fontWeight, textCase}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: var(--skillColor);
        font-weight: var(--fontWeight);
        text-transform: var(--textCase);
      }
    </style>
    ```
 
 2. 새로운 `<style>` 태그가 기술 목록에 이러한 스타일을 성공적으로 적용할 수 있도록 프런트매터 스크립트에 누락된 변수 정의를 추가하세요.
    - 텍스트 색상은 네이비 블루입니다.
    - 텍스트가 굵게 표시됩니다.
    - 목록 항목은 모두 대문자입니다.
</Steps>
<details>
<summary>✅ 코드를 확인하세요! ✅</summary>

```astro title="src/pages/about.astro" ins={18-19}
---
const pageTitle = "About Me";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Technical Writer",
  hobbies: ["photography", "birdwatching", "baseball"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];

const happy = true;
const finished = false;
const goal = 3;

const skillColor = "navy";
const fontWeight = "bold";
const textCase = "uppercase";
---
```
</details>

</Box>

<Box icon="check-list">
## 체크리스트

<Checklist>
- [ ] Astro `<style>` 태그를 사용하여 개별 페이지에 CSS 스타일을 추가할 수 있습니다.
- [ ] 변수를 사용하여 페이지 요소의 스타일을 지정할 수 있습니다.
</Checklist>
</Box>

### 참고 자료
- [Astro 구문과 JSX - 비교](/ko/basics/astro-syntax/#astro와-jsx의-차이점)

- [Astro `<style>` 태그](/ko/guides/styling/#astro에서-스타일링하기)

- [Astro의 CSS 변수](/ko/guides/styling/#css-변수)